<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件访问-父访问子-children</title>
</head>
<body>
    <div id="app">
        <cpn ref="cpn1"></cpn>
        <cpn ref="cpn2"></cpn>
        <cpn ref="cpn3"></cpn>
        <button @click="btnClick">button</button>
    </div>
</body>
    <template id="cpn">
        <div>
            <h1>子组件</h1>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>

        const cpn = {
            template: '#cpn',
            props: {

            },
            data() {
                return{
                    name: 'cpn-name'
                }
            },
            methods: {
                showMessage(){
                    console.log('showMessage');
                }
            }
        }

        const app = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                btnClick(){
                    // 1.$children
                    // console.log(this.$children);
                    // for(let c of this.$children){
                    //     console.log(c.name);
                    //     c.showMessage();
                    // }

                    //2.$refs 默认是一个空对象，需要在组件上加 ref="……"
                    console.log(this.$refs.cpn1.name);
                }
            },
            components: {
                cpn
            }
        })

    </script>
</html>